<template>
  <div>
    <!-- 搜索条件开始-->
    <el-row :gutter="20">
      <!-- 搜索条件开始 -->

      <el-col :span="22">
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="manager-search">
          <!-- 替换内容块开始 -->
          <el-col :span="8">
            <el-form-item label="标签" prop="label">
              <el-input
                v-model="queryParams.label"
                placeholder="请输入标签"
                @keyup.enter="handleQuery"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务名称" prop="serviceName">
              <el-input
                v-model="queryParams.serviceName"
                placeholder="请输入服务名称"
                @keyup.enter="handleQuery"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="false">
            <el-form-item label="父节点" prop="pid">
              <el-input v-model="queryParams.pid" clearable/>
            </el-form-item>
          </el-col>
          <!-- 替换内容块结束 -->

          <el-col :span="1.5">
            <el-button type="primary" @click="handleQuery" size="default">
              <i class="iconfont icon-chaxun btn-icon">查询</i>
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button @click="resetQuery" size="default">
              <i class="iconfont icon-chongzhi btn-icon">重置</i>
            </el-button>
          </el-col>
        </el-form>
      </el-col>
      <!-- 搜索条件结束 -->

      <!-- 工具条开始 -->
      <el-col :span="2">
        <el-row :gutter="20" style="float: right">
          <el-col :span="1.5">
            <!-- 替换内容块开始 -->
            <el-button type="primary" @click="handleAdd" size="default" plain>
              <i class="iconfont icon-tianjia btn-icon">添加</i>
            </el-button>
          </el-col>
          <!-- 替换内容块结束 -->
        </el-row>
      </el-col>
      <!-- 工具条结束 -->
    </el-row>
    <!-- 搜索条件结束-->

    <!-- 主页面开始 -->
    <div class="table-list">
      <el-row :gutter="20" class="main-row">
        <!-- 表格开始 -->
        <el-col :span="24">
          <el-table :data="tableList" @selection-change="handleSelectionChange" class="menu-table">
            <template #empty>
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column type="selection" align="center"/>
            <el-table-column label="ID" type="index"/>
            <el-table-column label="标签" prop="label" :show-overflow-tooltip="true"/>
            <el-table-column label="服务名称" prop="serviceName" :show-overflow-tooltip="true"/>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="300"
            >
              <template #default="scope">
                <el-button  size="default" type="primary" @click="handleUpdate(scope.row)">
                  <i class="iconfont icon-bianji btn-icon">编辑</i>
                </el-button>
                <el-button plain size="default" @click="handledetails(scope.row)">
                  <i class="iconfont icon-xiangqing btn-icon">查看</i>
                </el-button>
                <el-button plain size="default"   @click="handleDelete(scope.row)">
                  <i class="iconfont icon-shanchu btn-icon">删除</i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pagination"
          />
        </el-col>
        <!-- 表格结束 -->
      </el-row>
    </div>
    <!-- 主页面结束 -->
    <!--表单页面-->
    <formModal ref="formRef" @getData="getList" :formObj="formObj" :isType="isType"/>
  </div>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";

//分页
import Pagination from "@/components/Pagination/index.vue";
//弹出框表单组件
import formModal from "./form.vue";
import { all } from "q";
export default {
  components: { Pagination, formModal },
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  /**
   * 定义变量
   */
  data() {
    return {
      form: {}, //表单
      loading: false, //加载状态
      multiple: false, //控制头部删除按钮状态
      tableList: [], //表格列表
      total: 0, //总条目数
      queryParams: {
        //查询参数
        pageNum: 1,
        pageSize: 10,
        addressType: "",
        address: ""
      },
      rules: {
        //表单验证
        address: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur"
          }
        ]
      },
      formObj: {}, //表单数据
      dictType: [
        {
          value: "0",
          label: "离线地址",
          cssName: "success"
        },
        {
          value: "1",
          label: "在线地址",
          cssName: "parmary"
        },
        {
          value: "2",
          label: "睡眠",
          cssName: "danger"
        },
        {
          value: "3",
          label: "下载",
          cssName: "warning"
        }
      ]
    };
  },
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        this.tableList = newVal;
      }
    }
  },
  /**
   * 初始化函数
   */
  created() {},
  /**
   * 挂载函数
   */
  mounted() {
    //调用表格数据方法
    this.getList();
  },
  /**
   * 方法
   */
  methods: {
    /*
     * 表格多选框选中数据，按钮状态改变
     */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.multiple = !selection.length;
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      // this.getList();
      this.$emit("dcList");
    },
    /**
     * 重置表单
     */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      // this.getList();
      this.$emit("dcList");
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 获取表格列表
     */
    getList(data) {
      // //表格数据
      // this.tableList.push(data);
      // //分页条数
      // this.total = this.tableList.length;
      //子传父组件告知值改变了
      this.$emit("dcList", this.tableList);
    },
    /**
     * 删除数据
     * @param {Object} node
     */
    handleDelete(node) {
      ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //调用删除接口
          api.assetCatalog
            .del(node.id)
            .then(res => {
              //重新获取列表
              this.$emit("dcList");
              //弹出提示
              ElMessage({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(err => {
              ElMessage({
                type: "error",
                message: "删除失败!"
              });
            });
        })
        .catch(err => {
          ElMessage({
            type: "error",
            message: "删除失败!"
          });
        });
    },
    /**
     * 添加
     */
    handleAdd() {
      this.isType = ""; //根据状态判断是否请求详情接口
      this.$refs.formRef.title = "新增22";
      this.$refs.formRef.open = true;
    },
    /**
     * 编辑
     */
    handleUpdate(row) {
      this.isType = "edit"; //根据状态判断是否请求详情接口
      this.$refs.formRef.title = "编辑22";
      this.$refs.formRef.open = true;
      api.assetCatalog
        .editId(row.id)
        .then(res => {
          if (res.code) {
            this.formObj = res.data;
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    /**
     * 详情
     */
    handledetails(row) {
      this.isType = "details"; //根据状态判断是否请求详情接口
      this.$refs.formRef.title = "查看22";
      this.$refs.formRef.open = true;
      api.assetCatalog
        .editId(row.id)
        .then(res => {
          if (res.code) {
            this.formObj = res.data;
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  }
};
</script>

<style lang="less" scoped></style>
